import Taro, { Component } from '@tarojs/taro';
import { IheroData, IheroDetail } from 'src/interface';
import Main from './Main';

interface Istate {
  hero?: IheroData;
  storageDetail?: IheroDetail;
}
export default class Herodetail extends Component<any, Istate> {
  componentWillMount() {}

  componentDidMount() {
    const ename = Number(this.$router.params.ename);
    let hero: IheroData | undefined = undefined;
    const localHeroData = Taro.getStorageSync('heroData');

    if (localHeroData && localHeroData.all) {
      const { all: heroList } = localHeroData.all;

      hero = heroList.find((h) => h.ename === ename);

      this.setState({
        hero,
      });
    } else {
      Taro.navigateBack();
    }
    console.log({ ename });
    Taro.setNavigationBarTitle({
      title: hero ? hero.cname : '英雄介绍',
    });
  }

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  state: Istate = {
    storageDetail: Taro.getStorageSync(`heroDetail${this.$router.params.ename}`),
  };

  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  // config: Config = {
  //   navigationBarTitleText: '英雄介绍',
  // };

  render() {
    const { hero, storageDetail } = this.state;

    return <Main hero={hero} storageDetail={storageDetail} />;
  }
}
